<!--
*@Author: QWP
*@Description: 会议申请审核
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <a-layout-content style="padding: 0 12px; background-color: #fff">
      <a-layout class="f-h-100 s-bg-white">
        <u-search-header style="padding-left: 0; padding-right: 0">
          <u-form
            :model="searchF"
            :gutter="16"
            :elements="searchEl"
            class="f-w-auto"
          >
            <a-col>
              <u-icon-button>查询</u-icon-button>
            </a-col>
            <a-col flex="1">
              <a-row justify="end">
                <a-space>
                  <u-icon-button itype="audit" @click="showEdit = true">
                    审核
                  </u-icon-button>
                  <u-icon-button itype="close" @click="showEdit = true">
                    退回
                  </u-icon-button>
                </a-space>
              </a-row>
            </a-col>
          </u-form>
        </u-search-header>
        <a-layout-content>
          <u-table
            :columns="columns"
            :data="tabData"
            v-model:pagination="pagenation"
          ></u-table>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, h } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import { FormItemProps, TableColumnProps } from 'ant-design-vue';
import Edit from './Edit.vue';

const route = useRoute();

onMounted(() => {
  initCols();
});

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    fwzh: '',
    fwzh1: '',
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '审核状态',
    key: 'status',
    element: 'select',
    col: { span: 4 },
    formItemProps: formItemProps,
  },
  {
    label: '会议名称',
    key: 'option',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
  },
];

// 列表
const tabData = reactive([
  {
    a: '维森集团关于开展子公司...',
    b: '培训会议',
    b1: '培训会议',
    b2: 'A座2楼',
    b3: '2024-06-15 09:40',
    b4: '2024-06-15 17:40',
    b5: '未开始',
  },
  {
    a: '维森集团关于开展子公司...',
    b: '培训会议',
    b1: '培训会议',
    b2: 'A座2楼',
    b3: '2024-06-15 09:40',
    b4: '2024-06-15 17:40',
    b5: '进行中',
  },
  {
    a: '维森集团关于开展子公司...',
    b: '培训会议',
    b1: '培训会议',
    b2: 'A座2楼',
    b3: '2024-06-15 09:40',
    b4: '2024-06-15 17:40',
    b5: '已结束',
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: 'a', title: '会议名称', width: 150 },
  { dataIndex: 'b', title: '会议类型', width: 100 },
  { dataIndex: 'b1', title: '会议室名称', width: 150 },
  { dataIndex: 'b2', title: '会议地点', width: 150 },
  { dataIndex: 'b3', title: '开始时间', width: 150 },
  { dataIndex: 'b4', title: '结束时间', width: 150 },
  {
    dataIndex: 'b5',
    title: '会议状态',
    width: 150,
    align: 'center',
    customRender: ({ text }) => {
      let colors = {
        未开始: '#FA8C16',
        进行中: '#52C41A',
        已结束: '#1890FF',
      };
      return h('span', { style: { color: colors[text] } }, text);
    },
  },
]);

// 初始化列表表头
const initCols = () => {
  return;
};

// 编辑
let dialogTitle = ref<string>('新建会议');
let showEdit = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
